<template>
  <div class="vs-details-item">
    <h3 class="text-purple-1300 text-22 leading-7 font-semibold break-words w-full">
      {{$t('vs_details_title',{toolName: toolName})}}
    </h3>
    <div class="overflow-hidden border border-gray-2000 md:rounded-lg mt-7 vs-table">
      <table class="max-w-full w-full divide-y divide-gray-2000 table-fixed">
        <tbody class="bg-white">
          <tr>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate"
              style="width: 40%;">
              <span :title="$t('vs_categories')">{{$t('vs_categories')}}</span>
            </td>
            <td class="px-3 py-4"
              style="width: 60%;">
              <template v-if="toolData.categories && toolData.categories.length >0">
                <span class="text-base font-semibold text-gray-1000 max-w-full leading-7"
                  v-for="(cItem, cKey) in toolData.categories"
                  :key="cKey">{{ cKey>0?', ':'' }}{{cItem.name}}</span>
              </template>
              <span class="text-base font-semibold text-gray-1000 max-w-full"
                v-else>--</span>
            </td>
          </tr>
          <tr>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate">
              <span :title="$t('vs_website',{toolName: toolName})">{{$t('vs_website',{toolName: toolName})}}</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 truncate">
              <a :href="toolData.website"
                rel="nofollow"
                target="_blank"
                :title="toolName"
                class="text-base font-semibold text-purple-1300 hover:text-purple-1100  max-w-full"
                v-if="toolData.website"
                @click="handleExp(0, toolData)">
                {{toolData.website}}
              </a>
              <span class="text-base font-semibold text-gray-1000 max-w-full"
                v-else>--</span>
            </td>
          </tr>
          <tr>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate">
              <span :title="$t('vs_addedTime')">{{$t('vs_addedTime')}}</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 truncate">
              <span class="text-base font-semibold text-gray-1000 max-w-full"
                v-if="toolData.created_at">
                {{$formattedDate(toolData.created_at, fI18n, locale)}}
              </span>
              <span class="text-base font-semibold text-gray-1000 max-w-full"
                v-else>--</span>
            </td>
          </tr>
          <tr>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate">
              <span :title="$t('vs_pricing',{toolName: toolName})">{{$t('vs_pricing',{toolName: toolName})}}</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 truncate">
              <span class="text-base font-semibold text-gray-1000 max-w-full"
                v-if="toolData && toolData.prices && Array.isArray(toolData.prices) && toolData.prices.length >0">
                <template v-for="(item, key) in toolData.prices">
                  {{key>0?', ':''}}{{item.title}}
                </template>
              </span>
              <span class="text-base font-semibold text-gray-1000 max-w-full"
                v-else>--</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapActions } from 'vuex'
import { mapState } from 'vuex'
export default {
  name: 'CompareVSDetail',
  props: {
    toolData: {
      type: Object | null,
      default() {
        return {}
      },
    },
    toolPosIndex: {
      type: Number,
      default: 1,
    },
  },
  mixins: [mixinsExposure],
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
    toolName() {
      return this.$websiteName(this.toolData)
    },
  },
  methods: {
    ...mapActions(['exposure']),
    fI18n(arg) {
      const hasKey = this.$i18n.t(arg)
      if (hasKey) {
        const result = this.$i18n.t(arg)
        return result
      }
      return arg
    },
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },

    handleExp(key = 0, toolsData) {
      this.getThrottledClickFunction(toolsData, key)()
    },
    getThrottledClickFunction(toolsData, key) {
      let functionKey = `${toolsData.handle}-${key}`
      if (!this.throttledClickFunctions[functionKey]) {
        this.throttledClickFunctions[functionKey] = _.throttle(() => {
          let exporeData = this.getExporeData(
            toolsData,
            'Compare Details',
            this.toolPosIndex,
            false,
            {
              target_url: toolsData.website,
            }
          )
          this.exposure({
            ...exporeData,
          })
        }, 2000) // 设置节流时间间隔
      }
      return this.throttledClickFunctions[functionKey]
    },
  },
}
</script>
<style lang='scss' scoped>
.vs-table {
  tr {
    &:nth-child(even) {
      background: #f8f9fb;
    }
    td:last-child {
      border-left: 1px solid #e5e5e5;
    }
  }
}
</style>
